<template>
  <div class="common_width payStatus">
    <TableTitle title="支付状态">
      <div>
        （ 订单号： <i>{{ orderSn }}</i> ）
      </div>
    </TableTitle>
    <div v-if="status" class="success">
      <span
        ><el-button type="success" icon="el-icon-check" circle></el-button>
        <h4>恭喜您，支付成功啦！</h4></span
      >
      <p>支付方式：{{ payType }}</p>
      <p>支付金额：￥{{ totalAmount }}元</p>
      <el-button type="success" @click="toMyOrder" round>查看订单</el-button>
      <el-button type="info" @click="toHome" round>继续购物</el-button>
    </div>
    <div v-else class="fail">
      <span
        ><el-button type="danger" icon="el-icon-close" circle></el-button>
        <h4>支付失败，请稍后再试</h4></span
      >
      <p>失败原因：{{ reason }}</p>
      <p>您可以先去 <a href="/" style="font-size: 16px;">乐鲜首页</a> 逛逛</p>
      <el-button type="danger" @click="toRepay" v-if="reason === '未支付'" round
        >重新支付</el-button
      >
    </div>
  </div>
</template>

<script>
import tableTitle from "@/components/tableTitle/index.vue";
import { getNative, getOrderStatus } from "@/api/weixinPay";
export default {
  data() {
    return {
      status: null,
      reason: null,
      orderId: null,
      orderSn: null,
      totalAmount: null,
      payType: null
    };
  },
  mounted() {
    const {
      status,
      orderId,
      totalAmount,
      payType,
      reason,
      orderSn
    } = this.$route.query;
    this.status = status === "success" ? true : false;
    this.orderId = orderId;
    this.totalAmount = totalAmount;
    this.orderSn = orderSn;
    if (payType === "2") {
      this.payType = "微信支付";
    } else if (payType === "1") {
      this.payType = "支付宝";
    } else {
      this.payType = "未支付";
    }
    if (reason === "SUCCESS") {
      this.reason = "支付成功";
    } else if (reason === "NOTPAY") {
      this.reason = "未支付";
    } else if (reason === "REFUND") {
      this.reason = "转入退款";
    } else if (reason === "CLOSED") {
      this.reason = "已关闭";
    } else if (reason === "REVOKED") {
      this.reason = "已撤销";
    } else if (reason === "USERPAYING") {
      this.reason = "用户支付中";
    } else if (reason === "PAYERROR") {
      this.reason = "支付失败";
    }
  },
  methods: {
    toMyOrder() {
      this.$router.push("/MyOrder");
    },
    toHome() {
      this.$router.push("/");
    },
    toRepay() {
      //查询订单支付状态
      getOrderStatus(this.orderSn).then(res => {
        console.log("我的支付状态详情：");
        console.log(res);
        if (res.data && res.data.trade_state === "NOTPAY") {
          const data = {
            outtradeno: this.orderSn,
            totalfee: res.data.total_fee,
            orderId: this.orderId,
            payType: "2"
          };
          if (data) {
            //发起第三方服务-微信支付
            getNative(data).then(res => {
              if (res.code === 200) {
                this.$router.replace({
                  name: "orderDetails",
                  query: {
                    codeUrl: res.data.code_url,
                    orderId: this.orderId,
                    orderSn: this.orderSn
                  }
                });
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/payStatus/index.scss";
</style>
